<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
}
.layout-assistant {
  width: 300px;
  margin: 0 auto;
  height: inherit;
}
.layout-breadcrumb {
  padding: 10px 15px 0;
}
.layout-content {
  min-height: 200px;
  margin: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 2px;
}
.layout-content-main {
  padding: 10px;
}
.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
}
ul li a {
  display: block;
  width: 100%;
}
</style>
<template>
    <div class="layout">
        <Menu mode="horizontal" :theme="theme" active-name="1">
        <MenuItem name="1">
            <Icon type="ios-paper"></Icon>
            内容管理
        </MenuItem>
        <MenuItem name="2">
            <Icon type="ios-people"></Icon>
            用户管理
        </MenuItem>
        <MenuItem name="3">
            <Icon type="settings"></Icon>
            综合设置
        </MenuItem>
    </Menu>
        <div class="layout-content">
            <Row>
                <Col span="4">
                    <Menu active-name="1-2" :open-names="['1']" width="auto">
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="social-chrome"></Icon>
                                淘宝客
                            </template>
                            <MenuItem name="1-1">
                                <router-link to="/itemcoupon">好券清单</router-link>
                            </MenuItem>
                            <MenuItem name="1-2">
                                <router-link to="/jhs">聚划算商品</router-link>
                            </MenuItem>
                            <MenuItem name="1-3">
                                <router-link to="/tqg">淘抢购</router-link>
                            </MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="ios-navigate"></Icon>
                                导航一
                            </template>
                            <MenuItem name="1-1">选项 1</MenuItem>
                            <MenuItem name="1-2">选项 2</MenuItem>
                            <MenuItem name="1-3">选项 3</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-keypad"></Icon>
                                导航二
                            </template>
                            <MenuItem name="2-1">选项 1</MenuItem>
                            <MenuItem name="2-2">选项 2</MenuItem>
                        </Submenu>
                        <Submenu name="4">
                            <template slot="title">
                                <Icon type="ios-analytics"></Icon>
                                导航三
                            </template>
                            <MenuItem name="3-1">选项 1</MenuItem>
                            <MenuItem name="3-2">选项 2</MenuItem>
                        </Submenu>
                    </Menu>
                </Col>
                <Col span="20">
                    <div class="layout-content-main">
                        <router-view></router-view>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="layout-copy">
            2011-2016 &copy; TalkingData
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      theme: "dark"
    };
  }
};
</script>